<template>
  <div @click="addFade">
    <img :src="imgname" alt="" />
    <p>{{ title }}</p>
    <div>
      <span v-if="this.newLable.search('已免疫') != -1">已免疫</span>
      <span v-if="this.newLable.search('已驱虫') != -1">已驱虫</span>
      <span v-if="this.newLable.search('已绝育') != -1">已绝育</span>
      <span class="no" v-if="this.newLable.search('未绝育') != -1">未绝育</span>
      <span class="no" v-if="this.newLable.search('未免疫') != -1">未免疫</span>
      <span class="no" v-if="this.newLable.search('未驱虫') != -1">未驱虫</span>
    </div>
    <p>
      <span>{{ age }}</span>
      <span>{{ newSex }}</span>
      <span>|</span>
      <span>{{ area }}</span>
    </p>
  </div>
</template>

<script>
import { getaddFade,getAllFade,getSingleRe} from "@/api/recommend";

export default {
  props: ["imgname", "title", "label", "age", "sex", "area"],
  data() {
    return {
      newSex: "",
      newLable: [],
      uid:""

    };
  },
  watch: {
    sex: {
      handler(newVal, oldVal) {
        // this.newTitle.push(newTitle)
        if (newVal == 0) this.newSex = "男孩";
        if (newVal == 1) this.newSex = "女孩";
      },
      immediate: true,
    },
    label: {
      handler(newVal, oldVal) {
        this.newLable = newVal;
      },
      immediate: true,
    },
  },
  methods: {
    addFade() {
      getSingleRe({
        
      }).then(res=>{
        console.log(res);
      })
      getAllFade({ uid: this.$store.state.user.uid }).then(res=>{
        console.log(res);

      }
        
      )
      
    },
    
  },
}

</script>

<style lang="scss" scoped>
html {
  -webkit-text-size-adjust: none;
}

div {
  font-family: "黑体";
  color: black;
  box-shadow: 0 2px 4px 0 rgba(219, 218, 218, 0.2), 0 6px 20px 0 rgba(226, 223, 223, 0.19);

  img {
    width: 152px;
    height: 120px;
    border-radius: 10px;
  }

  width: 152px;
  background: #fff;
  margin-bottom: 10px;
  border-radius: 10px;

  >p {
    padding: 0;

    &:nth-child(2) {
      margin: 8px 0 10px 5px;
      font-size: 16px;
      font-weight: bold;
    }

    &:nth-child(4) {
      margin-top: -1px;
      padding-bottom: 10px;

      span {
        font-size: 8px;
        margin-left: 5px;
        color: #9f9f9f;

        &:nth-child(3) {
          margin: 0 2px 0 2px;
          padding: 0;
        }

        &:nth-child(4) {
          margin-left: 0;
        }
      }
    }
  }

  >div {
    width: 140px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    overflow: hidden;
    box-shadow: none;

    >span {
      width: 43px;
      height: 20px;
      line-height: 20px;
      background: #f7f2ef;
      text-align: center;
      display: inline-block;
      color: #cb5757;
      font-size: 8px;
      border-radius: 5px;
    }

    >.no {
      background: #f1f1f1;
      color: #9b9b9b;
    }
  }
}
</style>
